<template>
  <div>
    <div v-transfer-dom class="overlayer modal-open" @touchmove.prevent v-show="showPic">
      <popup v-model="showPic" height="100%" is-transparent :show-mask="false">
        <div class="pop-container">
          <div class="close" @click="hide"></div>
          <div class="pop-swiper">
            <swiper :show-dots="false" v-model="pic_index">
              <swiper-item class="swiper-demo-img" v-for="(item, index) in picList" :key="index">
                <img :src="item.img">
              </swiper-item>
            </swiper>
            <p class="pic-index">{{pic_index+1}}<span><i>/</i>{{picList.length}}</span></p>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
      picList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        showPic: false,
        pic_index: -1
      }
    },
    watch: {
      picList(newVal) {
        this.picList = newVal;
      }
    },
    methods: {
      show(index) {
        this.showPic = true;
        this.pic_index = index;

      },
      hide() {
        this.showPic = false;
      }
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .overlayer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background-color: #000;
  }

  /deep/ .pop-container {
    position: relative;
    height: 100%;
    background: #000;
    box-sizing: border-box;
  }

  /deep/ .pop-container .close {
    width: .6rem;
    height: .6rem;
    background: url("../assets/img/customer/close_popup.png") center center no-repeat;
    background-size: 100%;
    position: absolute;
    top: .5rem;
    left: .2rem;
    z-index: 99;
  }

  /deep/ .pop-swiper {
    padding-top: 2rem;
    position: relative;
  }

  /deep/ .pop-swiper .vux-swiper {
    height: 7.6rem !important;
    padding-bottom: 1rem;
    text-align: center;

    img {
      max-width: 90%;
      max-height: 100%;
      height: auto;
      width: auto;
    }
  }

  /deep/ .pop-swiper .pic-index {
    position: absolute;
    bottom: .25rem;
    right: .25rem;
    width: .9rem;
    height: .4rem;
    font-size: .38rem;
    text-align: center;
    color: #fff;
  }


  /deep/ .pop-swiper .pic-index i {
    font-style: normal;
    font-size: .33rem;
    color: #fff;
  }

  /deep/ .pop-swiper .pic-index span {
    font-weight: normal;
    font-size: .33rem;
    color: #fff;
  }
</style>
